﻿<template>
    <div id="app">
        <mt-header v-bind:title="title" style="background-color:#fda10e">
            <a slot="left" @click="back">返回</a>

        </mt-header>

        <div class="mui-content" style="background-color:#f5f5f5;">

            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>标题</label>
                    <input type="text" v-model="inputtitle" placeholder="请输入标题">
                </div>

                <div class="mui-input-row">
                    <label>上传图片</label>
                    <span>
                      
                        
                    </span>
                    <span class="mui-pull-right" @click="upload" style="padding-right:5px;">点击上传</span></a>
                </div>
                <div class="" style="padding-left:10px;">
                    <img :src="image" style="height:100px;"/>
                </div>
                <div class="mui-input-row">
                    <label>日期</label>
                    <span class="mui-pull-right" @click="openPicker" style="padding-right:5px;">{{date}}</span></a>
                </div>
                <div class="mui-input-row">
                    <label>类型</label>
                    <span class="mui-pull-right" @click="choosetype" style="padding-right:5px;">{{type}}</span></a>
                </div>
                <div class="mui-input-row">
                    <label>描述</label>
                    <input type="text" placeholder="请输入描述">
                </div>
                <p style="text-align:center;margin-top:20px;padding-bottom:20px;">
                    <Button type="error" shape="circle" style="width:80%;background-color:#fea00a" @click="sub">提交</Button>
                </p>

            </form>
        </div>
        <mt-datetime-picker ref="picker"
                            v-model="pickerVisible"
                            type="date"
                            year-format="{value} 年"
                            month-format="{value} 月"
                            :start-date='startData'
                            :end-date="endDate"
                            @confirm="queDing">
        </mt-datetime-picker>
        <mt-popup class="sharePopup" v-model="popupVisible" position="bottom" style="width:100%;">
            <Row style="margin-top:10px;">
                <Col span="12">
                <a style="text-align:center;width:100%;display:block;font-size:18px" @click="close">取消</a>
                </Col>
                <Col span="12">
                <a style="text-align:center;width:100%;display:block;font-size:18px" @click="savetype">确定</a>
                </Col>
            </Row>
          
       
            <mt-picker :slots="slots"  @change="typechange"></mt-picker>

        </mt-popup>
    </div>

</template>

<script>
    import { Toast } from 'mint-ui';
    import { DatetimePicker } from 'mint-ui';
    import wx from 'weixin-js-sdk'
    import Bus from '../bus.js'
    export default {
        name: 'app',
        data() {
            return {
                title: '添加食谱',
                inputtitle:"",
                image: "",
                images:[],
                startData: new Date(),
                endDate: new Date(),
                pickerVisible: new Date(),
                date: "请选择",
                type: "请选择",
                choosetypevalue:"",
                desc: "",
                popupVisible:false,
                slots: [{ values: ['早餐', '午餐', '晚餐'] }]



            }
        },
        components: {

        },
        mounted: function () {
            this.wxInit();
        },
        methods:
        {
            wxInit: function () {

                var url = window.location.href.split('#')[0];

                this.$api.post('wx/Index/wxquanxian', {
                    "url": url
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);

                        var res = response.data;
                        wx.config({
                            debug: false, // 开启调试模式,
                            appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                            timestamp: res.timestamp, // 必填，生成签名的时间戳
                            nonceStr: res.nonceStr, // 必填，生成签名的随机串
                            signature: res.signature,// 必填，签名，见附录1
                            jsApiList: ['checkJsApi', 'chooseImage',
                                'previewImage', 'uploadImage', 'downloadImage', 'getLocalImgData']
                        });

                    } else {
                        //  console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            },
            upload: function () {
                var _this = this;
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {

                        _this.images.localId = res.localIds;

                        let length = res.localIds.length;
                        if (length == 0) {
                            _this.$alert("请选择图片");
                            return;
                        }
                        var i = 0

                      



                        function upload() {
                            wx.uploadImage({
                                localId: _this.images.localId[i],
                                success: function (res) {
                                    i++;
                                
                                    //下载刚刚上传的图片

                                    _this.$api.post('wx/Index/uploadimg', {
                                        "serverId": res.serverId
                                    }, response => {
                                        if (response.status >= 200 && response.status < 300) {

                                            _this.image = response.data;//将缩略图上传的位置
                                        } else {
                                            //  console.log(response.message);
                                            //请求失败，response为失败信息
                                        }
                                    });




                                    if (i < length) {
                                        upload();
                                    }
                                },
                                fail: function (res) {
                                    alert(JSON.stringify(res));
                                }
                            });
                            //_this.$emit('saveImages', _this.saveImages.saveImageList)
                        }

                        upload();



                    },
                    cancel: function () {
                        alert("已取消选择");
                    }
                });
            },
            sub: function () {
             
                var mid = window.localStorage.getItem('mid');
                var date = this.$data.date;
                var title = this.$data.inputtitle;
                var image = this.$data.image;
                var type = this.$data.type;      
                var desc = this.$data.desc;

                if (title == "") {
                    Toast("请输入标题");
                    return;
                } else if (date == "" || date == "请选择") {
                    Toast("请选择日期");
                    return;
                } else if (type == "" || type == "请选择") {
                    Toast("请选择类型");
                    return;
                }

                this.$api.post('wx/Index/foodadd', {
                    "mid": mid,
                    "date": date,
                    "title": title,
                    "image": image,
                    "type": type,
                    "desc": desc
                }, response => {
                    console.log(response.status);
                    if (response.status >= 200 && response.status < 300) {
                        var data = response.data;
                        if (data.status == 200) {
                            Toast(data.message);
                            Bus.$emit('val', "show")
                            this.$router.push("home");

                        } else {
                            Toast(data.message);
                        }
                 
                    } else {

                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            },
            savetype: function () {
                this.$data.type = this.$data.choosetypevalue;
                this.$data.popupVisible = false;
            },
            close: function () {
                this.$data.popupVisible = false;
            },
            choosetype: function () {
                this.$data.popupVisible = true;
              
            
            },
            typechange: function (picker, values) {
                this.$data.choosetypevalue = values[0];
               
            },
            openPicker() {
                this.$refs.picker.open();
            },
            queDing(e) {

                this.$data.date = e.getFullYear() + "-" + (parseInt(e.getMonth()) + 1) + "-" + e.getDate();

            },
            load: function () {
                var endDate = new Date();
                endDate.setFullYear(endDate.getFullYear() + 10);
                this.$data.endDate = endDate;
                var truename = window.localStorage.getItem('truename');
                var phone = window.localStorage.getItem('phone');
                this.$data.truename = truename;
                this.$data.phone = phone;
            },
            back: function () {
                Bus.$emit('val', "show")
                this.$router.push("home");
            }
        },
        created: function () {
            this.load();
        }

    }
</script>

<style scoped>
</style>